<template>
    <div>
      <h1>Nuxt 3 client-only 示例</h1>
      <!-- 使用 client-only 组件 -->
      <client-only>
        <div>
          <!-- 仅在客户端使用浏览器 API -->
          <p>当前窗口宽度: {{ windowWidth }}</p>
          <!-- 模拟使用第三方客户端库 -->
          <button @click="useThirdPartyLibrary">点击调用第三方库</button>
        </div>
      </client-only>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  // 定义窗口宽度响应式变量
  const windowWidth = ref(0);
  
  // 模拟第三方库函数
  const useThirdPartyLibrary = () => {
    alert('已调用第三方客户端库！');
  };
  
  // 在客户端挂载后获取窗口宽度
  onMounted(() => {
    windowWidth.value = window.innerWidth;
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      windowWidth.value = window.innerWidth;
    });
  });
  </script>   